<template>
	
	<view>
		<tn-popup
		    v-model="isPopupVisible"
		    width="95%"
			height="90%"
		    open-direction="bottom"
		    @close="close"
		    close-btn>
		    <view class="tn-m-sm tn-p-sm   ">
		        <view class="tn-mb-xl">
		            <tn-title
		                size="lg"
		                :title="(formType == 'create' ? '新增' : '编辑')"
		                mode="hLine"
		                sub-title="VehicleType"
		                assist-color="tn-blue" />
		        </view>
				<tn-form ref="formRef" :model="formData" label-position="top">
				    
			  <scroll-view
			      style="height: 70vh"
			      scroll-y="true">
			      <tn-form-item label="所属车场"
			          ><tn-input
			              v-model="formData.parkingLotName"
			              disabled></tn-input
			      ></tn-form-item>
			      <tn-form-item label="岗亭名称"><tn-input v-model="formData.carPlate"></tn-input></tn-form-item>
			      <tn-form-item label="岗亭ip"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
			      <tn-form-item
			          label="免费放行"
			          prop="billingMethod">
			          <tn-bubble-box
			              :options="Dict.dict.COUPON_TYPE"
			              position="bottom"
			              @click="confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)">
			              <tn-input
			                  style="pointer-events: none"
			                  :model-value="Dict.label.COUPON_TYPE[formData.couponType]" />
			          </tn-bubble-box>
			      </tn-form-item>
			      <tn-form-item
			          label="图片获取"
			          prop="carType">
			          <tn-bubble-box
			              :options="Dict.dict.COUPON_UNITS"
			              position="bottom"
			              @click="confirmBubble(Dict.dict.COUPON_UNITS, 'couponUnits', $event)">
			              <tn-input
			                  style="pointer-events: none"
			                  :model-value="Dict.label.COUPON_UNITS[formData.couponUnits]" />
			          </tn-bubble-box>
			      </tn-form-item>
			      <tn-form-item
			          label="取消放行"
			          prop="carType">
			          <tn-bubble-box
			              :options="Dict.dict.COUPON_UNITS"
			              position="bottom"
			              @click="confirmBubble(Dict.dict.COUPON_UNITS, 'couponUnits', $event)">
			              <tn-input
			                  style="pointer-events: none"
			                  :model-value="Dict.label.COUPON_UNITS[formData.couponUnits]" />
			          </tn-bubble-box>
			      </tn-form-item>
			  
			      <tn-form-item
			          label="车主信息"
			          prop="carType">
			          <tn-bubble-box
			              :options="Dict.dict.COUPON_UNITS"
			              position="bottom"
			              @click="confirmBubble(Dict.dict.COUPON_UNITS, 'couponUnits', $event)">
			              <tn-input
			                  style="pointer-events: none"
			                  :model-value="Dict.label.COUPON_UNITS[formData.couponUnits]" />
			          </tn-bubble-box>
			      </tn-form-item>
			      <tn-form-item
			          label="手动开闸"
			          prop="carType">
			          <tn-bubble-box
			              :options="Dict.dict.COUPON_UNITS"
			              position="bottom"
			              @click="confirmBubble(Dict.dict.COUPON_UNITS, 'couponUnits', $event)">
			              <tn-input
			                  style="pointer-events: none"
			                  :model-value="Dict.label.COUPON_UNITS[formData.couponUnits]" />
			          </tn-bubble-box>
			      </tn-form-item>
			      <tn-form-item label="备注"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
			   
			      </scroll-view>
			  <view class="tn-flex justify-between tn-mt"
			      >	<tn-button
			  	    :shadow="true"
			  	    shadow-color="tn-grey"
			  	    @click="close"
			  	    size="lg"
			  	    width="80%"
			  	    bg-color="tn-gray">
			  	    取消
			  	  </tn-button>
			  	<tn-button
			  	  :shadow="true"
			  	  shadow-color="tn-grey"
			  	  @click="confirm"
			  	  size="lg"
			  	  width="80%"
			  	  bg-color="tn-blue">
			  	  确认
			  	</tn-button></view
			  >
				
				</tn-form>
		    </view>
		 
		</tn-popup>
		
		 			
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import cfsheep from "@/cfsheep";
	/** 页面初始化配置  */
	
	/* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
	const Dict = cfsheep.$store('dict');
	
 
	
	/* 4.表单气泡选择框使用     <tn-bubble-box :options="Dict.dict.Dict.dict.Dict.dict.COUPON_TYPE" position="top" @click="confirmBubble(Dict.dict.Dict.dict.Dict.dict.COUPON_TYPE, 'couponType', $event)" />*/
		// 确认选择器的选择
		const confirmBubble = (dict, labelKey, value) => {
			console.log("confirmBubble=>", labelKey);
			console.log("confirmBubble1=>", dict[value].value);
			formData.value[labelKey] = dict[value].value;
		};
	/* ====================== END ====================== */
	 
		
		/* ====================== 弹框页面标准处理 START====================== */
		// init formData
		// 表单数据模型
		const formData = ref({
		    parkingLotName: null,
		    couponType: "",
		    couponUnits: "",
		    ownerPhone: "",
		    address: "",
		});
		
		// 数据主键
		const pkId = ref(); 		
		// 显示控制器
		const isPopupVisible = ref(false);  
		// 表单的类型：create - 新增；update - 修改
		const formType = ref(""); 
		 // 表单 Ref
		const formRef = ref(); 
		
		// 打开弹窗
		const open = async (type: string, id?: number) => {
		    isPopupVisible.value = true; 
		    formType.value = type;
		  
		    // 修改时，设置数据
		    if (id) {
				// 设置修改主键
				pkId.value = id
		        try {
					// getDeatilById 获取formData 数据 
					// DemoAPi.value.getDetailById(id)
					
		        } catch {}
		    }
		};
		// 关闭弹窗
		const close= () => {
			isPopupVisible.value = false;
		}; 
		// 确认事件
		const confirm=()=>{}
		
		defineExpose({ open }); // 提供 open 方法，用于打开弹窗
		 
		/* ====================== END ====================== */
</script>

<style>
</style>